<template>
  <div :style="{ height: height + 'px' }" class="lemon-card-content">
    <!-- 卡片自定义样式 -->
    <div
      class="lemon-card-content-header"
      :style="{ backgroundColor: data.bgColor, height: height / 2 + 'px' }"
    >
      <img v-if="data.icon" :src="data.icon" :style="{ height: height / 5 + 'px' }" />
    </div>
    <div class="lemon-card-content-body" :style="{ height: height / 2 - 50 + 'px' }">
      <div class="title">
        <slot name="cardTitle" v-if="$slots.cardTitle"></slot>
        <span v-else>{{ data.name }}</span>
      </div>
    </div>
    <!-- 卡片底部操作栏 -->
    <div class="lemon-card-action">
      <Tooltip placement="top" title="编辑" v-auth="editAuth">
        <EditOutlined key="edit" @click="handleUpdate(data)" />
      </Tooltip>
      <Tooltip placement="top" title="删除" v-auth="deleteAuth">
        <DeleteOutlined @click="handleDelete(data)" />
      </Tooltip>
      <slot name="cardAction"></slot>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';
  import { propTypes } from '/@/utils/propTypes';

  // 组件接收参数
  defineProps({
    height: { type: Number, default: 200 },
    data: propTypes.object.def({}),
    //auth
    editAuth: propTypes.string.def(''),
    deleteAuth: propTypes.string.def(''),
  });
  //暴露内部方法
  const emit = defineEmits(['edit', 'delete']);

  async function handleUpdate(data) {
    emit('edit', data);
  }

  async function handleDelete(id) {
    emit('delete', id);
  }
</script>

<style lang="less" scoped>
  .lemon-card-content {
    width: 100%;
    position: relative;
    background-color: #ffffff;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid @border-color-dark;
  }

  .lemon-card-action {
    width: 100%;
    height: 50px;
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid @border-color-dark;
    position: absolute;
    bottom: 0;
  }

  .lemon-card-content-header {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .lemon-card-content-body {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }

  .title {
    font-size: 16px;
    font-family: PingFang SC, PingFang SC-Bold;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 1px;
  }
</style>
